<style scoped lang="less">
.el-main {
  padding: 0;
}
</style>

<template>
  <el-container>
    <el-main>
      <!--搜索-->
      <el-form ref="form" :model="search" inline style="width: 100%;">
        <el-form-item label="昵称：">
          <el-input v-model="search.nickName" placeholder="请输入昵称" clearable size="mini" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="真实姓名：">
          <el-input v-model="search.realName" placeholder="请输入真实姓名" clearable size="mini" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="身份证号：">
          <el-input v-model="search.idCard" placeholder="请输入身份证号" clearable size="mini" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="search.phonenumber" placeholder="请输入手机号" clearable size="mini" style="width: 200px"/>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="mini" @click="loadOwner(1)">
            <i class="el-icon-search"/>搜索
          </el-button>
          <el-button size="mini" @click="nullSearch">
            <i class="el-icon-refresh"/>重置
          </el-button>
        </el-form-item>
      </el-form>

      <!--导出按钮-->
      <el-button type="warning" @click="exports()" size="mini">
        <i class="el-icon-download"/>导出
      </el-button>

      <!--表格-->
      <el-table :data="owners" index
                max-height="100%"
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{background:'#E4E7ED','text-align':'center',color:'#000'}"
                style="width: 100%;">
        <el-table-column label="序号" width="50x">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="ownerNickname" label="昵称"/>
        <el-table-column prop="ownerRealName" label="真实姓名"/>
        <el-table-column prop="ownerGender" label="性别"/>
        <el-table-column prop="ownerAge" label="年龄"/>
        <el-table-column prop="ownerIdCard" label="身份证"/>
        <el-table-column prop="ownerPhoneNumber" label="手机号"/>
        <el-table-column prop="communityName" label="小区名称"/>
        <el-table-column prop="buildingName" label="楼栋名称"/>
        <el-table-column prop="unitName" label="单元名称"/>
        <el-table-column prop="roomName" label="房间名称"/>
        <el-table-column prop="ownerBirthday" label="出生日期"/>
        <el-table-column prop="ownerType" label="业主类型"/>
        <el-table-column label="操作" width="60px">
          <template slot-scope="scope">
            <el-button type="text" @click="outOwner(scope.row.ownerRoomId)" size="mini">解绑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
          background
          :total="total"
          @size-change="sizeTo" @current-change="loadOwner"
          layout="sizes, prev, pager, next, jumper, total"
          :page-sizes="[10, 20, 30, 50]"
          style="float: right"/>
      <div style="clear: both"/><!--清除浮动-->
    </el-main>
  </el-container>
</template>

<script>
import {saveAs} from "file-saver";

export default {

  methods: {
    //解绑
    outOwner(ownerRoomId) {
      this.$confirm("确定解绑业主？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'error'
      }).then(() => {
        const userName = localStorage.getItem('username')
        this.$axios.get('/zyOwner/owner/' + ownerRoomId + "?userName=" + userName)
            .then(res => {
              if (res.data.code === 200) {
                location.reload()
              }
            });
      }).catch(() => {
      });
    },

    //导出
    exports() {
      this.$prompt('确定要导出所有吗？', '输入文件名', {
        confirmButtonText: '确定', cancelButtonText: '取消',
      }).then(({value}) => {
        this.$axios.get("/zyOwner/export", {responseType: 'arraybuffer'}).then(res => {
          const blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
          saveAs(blob, value + '.xlsx');
        });
      }).catch(() => {
      });
    },

    //分页数据+查询
    loadOwner(current) {
      const communityId = localStorage.getItem("comId");
      this.$axios.post("/zyOwner/owners/" + current, {
        size: this.sizes,
        nickName: this.search.nickName,
        userName: this.search.userName,
        idCard: this.search.idCard,
        phonenumber: this.search.phonenumber,
        communityId: communityId,
      }).then(res => {
        if (res.data.code === 200) {
          this.owners = res.data.data.records;
          this.total = res.data.data.total;
        }
      }).catch(res => {
        this.$message.error("连接异常")
      })
    },
    //更改每页条数
    sizeTo(size) {
      this.sizes = size;
      this.loadOwner(1);
    },
    //重置搜索
    nullSearch() {
      this.search = {nickName: '', realName: '', idCard: '', phonenumber: ''}
      this.loadOwner(1);
    },
  },

  mounted() {
    this.loadOwner(1)
  },

  data() {
    return {
      search: {
        nickName: '',    /*昵称*/
        realName: '',    /*真实姓名*/
        idCard: '',       /*身份证号*/
        phonenumber: '',  /*手机号搜索框*/
      },/*搜索框*/
      owners: [],    /*业主数据数组*/
      owner: {
        ownerId: 0,
        ownerNickname: '',
        ownerRealName: '',
        ownerGender: '',
        ownerAge: '',
        ownerIdCard: '',
        ownerPhoneNumber: '',
        ownerBirthday: '',
        ownerType: '',
        communityName: '',
        buildingName: '',
        unitName: '',
        roomName: '',
      },/*业主对象*/
      total: 0,      /*总条数*/
      sizes: 10,     /*每页条数*/
      selectList: [],/*选择列的id数组*/
    }
  },

}
</script>
